<template>
  <div class="footerNav">
    <div class="warpper">
      <div class="footerNav-top">
        <ul>
          <li class="telme">--联系我们--</li>
          <li>监督电话：{{ footData.phone }}</li>
          <li>公司地址：{{ footData.address }}</li>
        </ul>
        <div class="authority">
          <div style="margin-right: 10px">
            <img :src="footData.QRcode" alt="" />
            <p>官方服务号</p>
          </div>
          <div>
            <img :src="footData.QRcode" alt="" />
            <p>xxxx</p>
          </div>
        </div>
      </div>
      <div class="footerNav-bottom">
        {{ footData.copyrigth }}
      </div>
    </div>
  </div>
</template>

<script>
import api from "../api/";
export default {
  name: "Footer",
  data() {
    return {
      footData: {},
    };
  },
  mounted() {
    api.getBottom().then((res) => {
      if (res.data.status == 200) {
        this.footData = res.data;
      }
    });
  },
};
</script>

<style scoped lang="less"  >
.footerNav {
  background: #fff;
  padding-bottom: 20px;
  .footerNav-top {
    padding: 20px 150px;
    overflow: hidden;
    ul {
      float: left;
      .telme {
        font-size: 18px;
        font-weight: bold;
      }
      li {
        margin: 12px 0;
      }
    }
    .authority {
      margin-left: 230px;
      float: left;
      text-align: center;
      overflow: hidden;
      div {
        float: left;
      }
    }
  }
  .footerNav-bottom {
    text-align: center;
  }
}
img {
  width: 100px;
  height: 100px;
}
</style>